<template>
	<view class="scroll-winning-info">
		<view class="scroll_cons"  v-if="data.length">
			<block v-for="(item,index) in data" :key="item.id">
				<view class="win_cons"  v-if="item.img!=undefined">
					<view class="user_avatar">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="user_name" v-show="item.title!=undefined">
						{{item.title}}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			data:{
				type:Array,
				default:[]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-winning-info{
		overflow: hidden;
		display: inline-block;
		.scroll_cons{
			display: flex;
			animation: 30s wordsLoop linear infinite normal;
			overflow: hidden;
		}
		.win_cons{
			min-width: 400rpx;
			height: 52rpx;
			background: rgba(24, 19, 108, 0.68);
			border-radius: 50rpx;
			padding: 8rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			margin-right: 88rpx;
			.user_avatar{
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 16rpx;
				flex-shrink: 0;
				image{
					display: block;
					width: 36rpx;
					height: 36rpx;
				}
			}
			.user_name{
				flex: 1;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 22rpx;
				line-height: 100%;
				letter-spacing: 0.03em;
				color: #FFFFFF;
				margin-right: 8rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			// .win_info{
			// 	font-family: 'PingFang SC';
			// 	font-style: normal;
			// 	font-weight: 400;
			// 	font-size: 22rpx;
			// 	line-height: 100%;
			// 	letter-spacing: 0.03em;
				
			// 	color: #FFFFFF;
			// }
		}
		.win_scroll{
			width: 100%;
			overflow-x: hidden !important;
			
		}
	}
	
	@keyframes wordsLoop {
		0% {
	
			transform: translateX(100vw);
				
			-webkit-transform: translateX(100vw);
	
		}
		100% {
			transform: translateX(-100%);
				
			-webkit-transform: translateX(-100%);
			
	
		}
	}
	
</style>